<template>
  <view class="page">
    <u-navbar autoBack :placeholder="true">
      <template #center>
        <u-text align="center" suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" text="张珍珍-诊断报告" size="32rpx"
          color="#333" @click="show = !show"></u-text>
      </template>
    </u-navbar>

    <view class="main">
      <view class="bg-white radius padding margin-top-sm">
        <u-text text="本周周报评语" size="32rpx" color="#333" bold></u-text>
        <u-divider></u-divider>

        <view v-for="item in subjectList" :key="item.id">
          <view class="flex align-center margin-top-sm">
            <image :src="item.icon" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image>
            <u-text :text="`${item.name}小结`" size="32rpx" color="#333" bold></u-text>
          </view>
          <view class="bg-grey padding-bottom-sm margin-top-xs radius-lg">
            <view>
              <u-textarea border="none" style="background:transparent" v-model="item.comment" placeholder="请输入补充评语"
                customStyle="height:100rpx"></u-textarea>
            </view>
            <view class="flex justify-end align-end padding-right">
              <view class="btn-create">生成评语</view>
            </view>
          </view>
        </view>
        <u-divider></u-divider>
        <view>
          <u-text text="整体评价" size="32rpx" color="#333" bold></u-text>
        </view>
        <view class="flex margin-top-xs" v-for="item in rateList" :key="item.id">
          <text class="text-muted" style="width: 150rpx;">{{ item.name }}</text>
          <up-rate :allowHalf="true" activeColor="#F6C042" :minCount="5" :maxCount="5" :score="item.score" a></up-rate>
        </view>
        <view class="flex margin-top-xs">
          <text class="text-muted" style="width: 150rpx;">正确率</text>
          <text class="text-muted">30%</text>
        </view>

        <view class="bg-grey padding-bottom-sm margin-top-xs radius-lg">
          <view>
            <u-textarea border="none" style="background:transparent" v-model="commentContent" placeholder="请输入补充评语"
              customStyle="height:100rpx"></u-textarea>
          </view>
          <view class="flex justify-end align-end padding-right">
            <view class="btn-create">生成评语</view>
          </view>
        </view>
      </view>
      <PopupBox :show="show" :top="0">
        <view class="popup-item" v-for="item in studentList" :key="item.id" @click="handleStudentClick(item)">
          <u-text align="center" :text="item.name" size="32rpx" color="#333"></u-text>
        </view>
      </PopupBox>
    </view>

    <view class="footer gap">
      <u-button customStyle="color:#333" size="large" shape="circle" color="#eee" text="预览"></u-button>
      <u-button size="large" shape="circle" :color="themePrimary" text="提交并推送"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import PopupBox from '@/components/PopupBox/index.vue';
import { useTheme } from '@/composables/useTheme';

const { themePrimary } = useTheme();
const show = ref(false)
const studentList = ref([
  {
    id: 1,
    name: '张三',
    status: 1,//1:已生成 2:待生成
  },
  {
    id: 2,
    name: '李四',
    status: 2,//1:已生成 2:待生成
  },
])

// 整体评价
const rateList = ref([
  {
    id: 1,
    name: '学习态度',
    score: 4.8,
  },
  {
    id: 2,
    name: '完成速度',
    score: 4.8,
  },
  {
    id: 3,
    name: '书写规范',
    score: 4.8,
  },
])

// 学科评价
const subjectList = ref([
  {
    id: 1,
    name: '语文',
    icon: '/static/image/img-chinese.png',
  },
  {
    id: 2,
    name: '数学',
    icon: '/static/image/img-math.png',
  },
  {
    id: 3,
    name: '英语',
    icon: '/static/image/img-english.png',
  },
])
const commentContent = ref('')
const handleStudentClick = (item) => {
  show.value = false
}

</script>
<style scoped lang="scss">
.popup-item {
  padding: 30rpx 40rpx;
  background: white;
  border-bottom: solid 1px #eee;
}

.btn-create {
  width: 144rpx;
  height: 60rpx;
  background: #0060E6;
  border-radius: 50rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 28rpx;
  color: white;
}
</style>